<template>
	<view class="club_deta">
		<uv-navbar placeholder autoBack bgColor="#CA1C1D">
			<template v-slot:left>
				<view class="left_slot">
					<image src="@/static/images/back.png"></image>
				</view>
			</template>
			<template v-slot:center>
				<view class="nav_title">{{title}}</view>
			</template>
		</uv-navbar>
		<uv-swiper :list="rotation" keyName="img" radius="0" imgMode="scaleToFill" height="300"></uv-swiper>
		<view class="list">
			<view class="title">{{title}}</view>
			<view class="item" v-for="item in list">
				<image :src="item.product.img" class="img"></image>
				<view class="item_view">
					<view class="item_info">
						<view class="name">{{item.product.name}}</view>
						<view class="stock">
							<view class="label">数量：{{item.number}}瓶</view>
						</view>
					</view>
					<view class="item_foot">
						<view class="price">
							<view class="key">￥</view>
							<view class="value">{{item.price}}</view>
						</view>
						<view class="btn" @click="router(`/pages/club/club_deta_buy?id=${item.id}`)">立即参与</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		underwrite
	} from "@/request/api";
	import useBase from "@/hooks/useBase.js";
	const {
		router
	} = useBase();
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref
	} from "vue";

	let title = ref("");
	const rotation = ref([]),
		list = ref([]);
	onLoad(async (options) => {
		let id = options.id
		let res = await underwrite({
			club_id: id
		});
		title.value = res.club?.name;
		rotation.value = res.rotation;
		list.value = res.underwrite;
	});
</script>

<style scoped lang="scss">
	.club_deta {
		min-height: calc(100vh - var(--window-top) - var(--window-bottom));
		background-color: #f5f5f5;

		.left_slot {
			image {
				width: 43rpx;
				height: 36rpx;
			}
		}

		.nav_title {
			color: #F5F5F5;
			font-size: 36rpx;
		}

		.right_slot {
			image {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.cover {
			image {
				width: 100%;
				height: 600rpx;
			}
		}

		.list {
			padding: 0 25rpx;
			box-sizing: border-box;

			.title {
				color: #333333;
				font-size: 36rpx;
				font-weight: bold;
				padding: 30rpx 0 30rpx 36rpx;
				box-sizing: border-box;
				position: relative;

				&::after {
					content: "";
					width: 8rpx;
					height: 34rpx;
					background: #CA1C1D;
					position: absolute;
					left: 15rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			.item {
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				display: flex;

				.img {
					width: 240rpx;
					height: 240rpx;
					border-radius: 10rpx;
				}

				.item_view {
					flex: 1;
					min-height: 240rpx;
					padding: 12rpx 0 12rpx 22rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.item_info {
						.name {
							line-height: 36rpx;
							color: #333333;
							font-size: 26rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}

						.stock {
							padding-top: 20rpx;
							box-sizing: border-box;
							display: flex;

							.label {
								height: 34rpx;
								line-height: 34rpx;
								color: #666666;
								font-size: 20rpx;
								border-radius: 3rpx;
								border: 1px solid #666666;
								padding: 0 14rpx;
								box-sizing: border-box;
								background: #FFFFFF;
							}
						}
					}

					.item_foot {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.price {
							color: #CA1C1D;
							display: flex;
							align-items: flex-end;

							.key {
								font-size: 28rpx;
								font-weight: bold;
							}

							.value {
								font-size: 40rpx;
							}
						}

						.btn {
							width: 170rpx;
							height: 60rpx;
							line-height: 60rpx;
							text-align: center;
							color: #FFFFFF;
							font-size: 26rpx;
							border-radius: 10rpx;
							background: #CA1C1D;
						}
					}

				}
			}
		}
	}
</style>